<template>
  <view class="quest">
    <view class="">
      <text>关闭原因（必填）</text>
      <textarea v-model="msg" cols="30" rows="10" placeholder="请填写关闭原因,50字内"></textarea>
    </view>

    <view class="signup">
      <img src="@/static/images/wechat.png" alt="" @click="gokefu"/>
      <button @click="cancel">确认关闭</button>
      <button
        style="background-color: #f2f2f2; width: 300rpx; margin-left: 20rpx; color: #999"
        @click="back"
      >
        返回
      </button>
    </view>
  </view>
</template>
<script setup lang="ts">
import { closejob } from '@/services/home'
import { gokefu } from '@/utils/index';
import { ref } from 'vue'
const msg = ref('')
const cancel = () => {
  if (msg.value) {
    uni.showModal({
      title: '提示',
      content: '确定要关闭此任务？',
      success: async function (result) {
        if (result.confirm) {
          const currentPage = getCurrentPages().pop()
          const id = currentPage?.$page.options.id
          const res = await closejob({ id: id, msg: msg.value })
          if (res.success) {
            uni.showToast({
              title: '关闭成功',
              icon: 'none',
            })
            setTimeout(() => {
              uni.hideLoading()
              uni.navigateBack()
            }, 1000)
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none',
            })
          }
        }
      },
    })
  } else {
    uni.showToast({
      title: '请填写关闭原因',
      icon: 'none',
    })
  }
}
const back = () => {
  uni.navigateBack()
}
</script>

<style lang="scss">
textarea {
  width: 100%;
  background-color: #fff;
  border-radius: 10rpx;
  margin-top: 20rpx;
  padding: 20rpx;
  font-size: 24rpx;
  color: #000;
  box-sizing: border-box;
}
uni-button:after {
  border: none;
}
.signup {
  position: fixed;
  width: 100vw;
  height: 80rpx;
  bottom: 0;
  right: 0;
  background-color: #fff;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 0 40rpx;
  img {
    height: 80rpx;
  }
  button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80%;
    width: 80%;
    color: #fff;
    background-color: #ff1e3e;
    font-size: 26rpx;
  }
}
.button {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90rpx;
  height: 38rpx;
  font-size: 20rpx;
  line-height: 40rpx;
  color: #fff;
  background-color: #1e9fff;
}

.quest {
  min-height: 100vh;
  padding: 20rpx;
  background-color: #f7f7f7;
  font-size: 24rpx;
  color: #999;
  padding-bottom: 100rpx;
  .quest-title {
    background-color: #fff;
    padding: 40rpx;
    border-radius: 10rpx;

    .quest-title-top {
      color: #000;
      font-size: 26rpx;
      font-weight: bold;
    }

    .quest-title-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 30rpx;
    }
  }

  .quest-id {
    background-color: #fff;
    padding: 20rpx 40rpx;
    border-radius: 10rpx;
    margin-top: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .quest-demand,
  .quest-description {
    background-color: #fff;
    padding: 20rpx 40rpx;
    border-radius: 10rpx;
    margin-top: 20rpx;

    .after {
      font-size: 28rpx;
      color: #000;
      position: relative;
      padding-left: 20rpx;
    }

    .after::after {
      content: '';
      position: absolute;
      left: 0rpx;
      top: 20%;
      height: 60%;
      border: 1px solid #00bb99;
    }

    view {
      margin-top: 30rpx;
    }
  }
}
</style>
